<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // var chartDom = document.getElementById('main');
        // var myChart = echarts.init(chartDom);
        // 指定图表的配置项和数据

        var option;

        $.getJSON(
            './js/guanxi.json', function (json) {
                console.log(json);
                
                myChart.setOption(option = {
                    title: {
                        text: 'ECharts配置'
                    },
                    tooltip: {},
                    legend: {
                        data: ['销量']
                    },
                    series: [
                        {
                            type: 'graph',
                            layout: 'none',
                            data:json.nodes.map(function(node){
                                return{
                                    name:node.label,
                                    y: node.y,
                                    x: node.x,
                                    id:node.id ,
                                    symbolSize:node.size,
                                    itemStyle: {
                                        color:node.color,

                                    }
                                }
                            }) ,
                            edges: [{
                                "source": "underscore",
                                "target": "request",
                            }

                            ],

                        }
                    ]
                });


            }
        )





        // var option = {
        //     title: {
        //         text: 'ECharts配置'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data: ['销量']
        //     },
        //     series: [
        //         {
        //             type: 'graph',
        //             layout: 'none',
        //             data: [
        //                 {

        //                     "name": "jquery",
        //                     "y": -404.26147,
        //                     "x": -739.36383,
        //                     "id": "jquery",
        //                     "symbolSize": 40.7252817,
        //                     itemStyle: {
        //                         "color": "#4f19c7",

        //                     }
        //                 },
        //                 {

        //                     "name": "backbone",
        //                     "y": -862.7517,
        //                     "x": -134.2215,
        //                     "id": "backbone",
        //                     "symbolSize": 6.1554675,
        //                     itemStyle: {
        //                         "color": "#c71969",
        //                     }
        //                 }

        //             ],
        //             edges: [{
        //                 "source": "jquery",
        //                 "target": "backbone",
        //             }

        //             ],

        //         }
        //     ]
        // };


        // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);
    </script>
</body>

</html>